jq-04 事件和动画

一、事件对象

在给元素添加事件的函数里，直接传一个形参使用事件对象event，不需要做兼容；

转回原生事件对象：e.originalEvent; 鼠标滚轮事件等需要转回原生

二、事件对象常用的属性

类型

type：返回事件类型，click；
target：事件源
delegateTarget：代理的这个对象，谁调用事件的就是谁（delegate：代表）；
currentTarget：触发该事件的当前对象；

事件委托的事件时：delegateTarget指向的是父元素，currentTarget指向的是子元素；

直接绑定的事件时：它们两个的值是相等的；

位置属性

在页面上移动：$(document).mousemove

pageX,pageY：距离文档的位置（还计算被卷起的高度）；
clientX,clientY：距离可视窗口的位置；
offsetX,offsetY：距离绑定事件元素的位置；
screenX,screenY：距离屏幕边缘的位置；

行为

右键：$(document).contextmenu；

e.stopPropagation() 阻止事件冒泡（父元素和子元素都设置点击事件，点击子元素会触发父元素）；
e.preventDefault() 阻止默认行为
return false 可以阻止冒泡和默认行为；

键盘事件

keydown：按下；
keyup：抬起；常用于表单输入框按下数字；
keyCode：获取按键的键码值；
which：相当于keyCode获取键码值；

which还可以获取鼠标按键:(1,2,3)代表左中右；需要放在对应的事件当中，click,scroll,contextmenu;

键盘常用：altkey ctrlkey shiftkey；

$("textarea").keyup(function () {
    $("i").html(40 - $(this).val().length);    //当输入框的按钮抬起时，修改i标签的内容,做到实时更新；
})

三、事件

把原生的onclick变成click，去掉on，后面直接跟括号函数，不用等号；
例：$("button").click(function(){});
事件可以链式调用：写完一个事件后面直接点上另一个事件；
.hover(fn1,fn2)；当一个fn时，为移入，两个是移入移出；
元素.focus()；有参数function时，表示元素获得焦点时，要执行的处理函数；

没有参数时，调用focus方法，获得焦点；

blur(),submit(),change(), select()，reset()；都可以使用；

四、事件处理

事件绑定

绑定一个事件：
```
$('div').on('click', function(){})
```

绑定多个事件：

$('div').on('mouseover mouseout', function(){})
// or
$('div').on({
    click: function(){},
    mouseover: function(){}
})

自定义事件：

$('div').on('custom', function(){})
// 触发自定义事件
$('div').trigger('custom')

触发事件：
```
$('button').trigger('submit')
```

事件委托

把子元素要做的事交给父元素

$('.parent').on('click', $('.children'), function(){})

事件移除

$('div').off()

（1）不填参数时，移除页面中的所有事件；

（2）一个参数：填写要移除的具体事件，可以填写命名空间的函数；

（3）二个参数：.off(事件，对应事件函数名)；

命名空间

（1）在原生里：将所有的函数放在一个对象里，需要用到哪个函数就对象取值；

（2）jquery：在事件后面加点，后面跟自定义名字，例：click.b；

$("span").off("click.b") 清除事件b；

只执行一次事件：.one(事件，函数)；

五、动画效果

可用方法

基本效果

show()；显示
hide()；隐藏
toggle()；显示或隐藏；

透明度变化

fadeIn()；透明度变化显示；
fadeOut()；透明度变化隐藏；
fadeTo()；指定透明度变到多少，第一个参数时间，第二个参数透明度的值，第三个参数填写其他的；
fadeToggle()；透明度的显示或消失；

滑动

slideUp()；收起；
slideDown()；放下；
slideToggle()；收起或放下；

可用参数

第一个参数：可以传入时间，单位毫秒，或填写关键字：fast(200),normal(400),slow(600);

第二个参数：linear，动画方式；

第三个参数：函数，用来动画完成执行的回调函数；

例：$("div").show(1000,"linear",function(alert(1)));

六、自定义动画

animate

第一种语法
```
$("div").animate({width:100},1000,"linear",function(){console.log(1)})
```
第一个参数：对象，对象里面是变化属性的键值对；
第二个参数：时间，单位毫秒；
第三个参数：速度变化方式；linear匀速，默认为swing；
第四个参数：动画完成的函数；
第二种语法：
```
$("div").animate({width:100},{duration:2000,complete:function(){})
```
第一个参数：对象，对象里面写变化属性的键值对；
第二个参数：对象，动画的额外选项；duration(持续时间)，complete(完成执行的函数);
动画对列
```
$("div").animate({width:100},{queue:false}).animate({height:100})
```
执行完前一个，再执行后面的；
queue:false 动画一起执行；
animate()；也可以使用属性值：show,hide,toggle，来代替透明度变化和高度滑动；
累加、累减动画：使用"+="或"-="；
```
$("div").animate({"width":"+=500"})
```
每点击一下，加500的宽度；

stop

.stop([clearQueue],[gotoEnd])

如果不填写参数，停止当前动画，如果后面还有动画，则会直接执行后面的动画；

动画停止：true或false；第一个是否清空队列，第二个是否立即完成当前动画；

stop(true)：清空队列，停止当前动画；
stop(false,true)；常用于后一个动画需要基于前一个动画结束才执行
stop(true,true)；停止当前动画并直接到达当前动画的末状态，并清空动画队列；

  //用户鼠标移入，清空后面的队列，停止当前动画，再执行当前动画
//如果不是动画对列，不需要加true；
$("div").hover(function(){
    $(this).stop(true).animate({width:500},300).animate({height:500},300)
},function(){
    $(this).stop(true).animate({height:100},300).animate({width:100},300)
})

finish

元素的动画立即完成；

delay

元素.delay(毫秒).动画；元素等过了毫秒值后再开始动画；

七、动画队列中的queue;

css不属于动画，在参于动画队列时，不会在动画队列中排队，会先执行；
queue(function(){}); 需要在函数括号添加个形参，在事件里面调用这个形参；
除了使用queue强行插入之外，使用回调函数，在前面的标签，作为结束动画执行的内容；

强行插入动画队列，函数完成以后会影响对列下面的动画执行，需要在函数的括号中写个形参，然后在调用这个形参加小括号，调用确保队列剩下的动画正常执行；这个形参是一个函数，相当于queue后面的动画队列的一个集合，需要调用一下；

八、判断元素是否处于动画状态

在使用 animate() 方法的时候，要避免动画积累而导致动画与用户的行为不一致，当用户快速在某个元素上执行 animate() 动画时，就会出现动画积累。解决方法是判断元素是否处于动画状态，如果元素不处于动画状态，才为元素添加新的动画，否则不添加。

if(!$(this).is(":animated")){    //判断元素是否正处于动画状态
        //如果当前没有进行动画，则添加新动画
}
也可以：$("div:not(:animated)").animate({ left: "+=20" }, 1000);    //没有在动画的div元素添加动画

$("li").hover(function(){
    if(!$(this).find("div").is(":animated")){   //如果没有在动画就执行动画；
        $(this).find("div").animate({
            "height": "show",
        });
    }
},function(){
    $(this).find("div").animate({
        "height": "hide",
    });
})
$("div:not(:animated)").animate({ left: "+=20" }, 1000);    //没有在动画的div元素添加画

九、函数

递归：在函数中调用自己，需要有一个出口，否则会死循环；

回调：当做参数传递给另一个函数；

闭包：两个函数嵌套，内层函数使用外层函数的变量；

$(function(){
    function down(){
        $(this).next().slideDown(down);
    }
    $("div").eq(0).slideDown(down);
})

递归让下一个

高频面试题

● Jquery 如何给新添加的元素绑定事件？

jq-03 属性、位置

jq-05 ajax 自定义jquery插件

jq-04 事件和动画 #

一、事件对象 #

二、事件对象常用的属性 #

类型 #

位置属性 #

行为 #

键盘事件 #

三、事件 #

四、事件处理 #

事件绑定 #

事件委托 #

事件移除 #

命名空间 #

五、动画效果 #

可用方法 #

基本效果 #

透明度变化 #

滑动 #

可用参数 #

六、自定义动画 #

animate #

stop #

finish #

delay #

七、动画队列中的queue; #

八、判断元素是否处于动画状态 #

九、函数 #

高频面试题 #